<template>
  <div class="profit">
    <!-- 导航栏 -->
    <van-nav-bar title="收益" />
    <!-- 标签 -->
    <van-tabs v-model="active" @click="queryApplyData">
      <van-tab title="全部"></van-tab>
      <van-tab title="提现"></van-tab>
    </van-tabs>
    <!-- 提现内容展示 -->
    <div v-if="active == 1" class="content">
      <van-card class="applyCard" v-for="apply in AllApplyData" :key="apply.id">
        <!-- 标题 -->
        <template #title>
          <span style="font-size: 16px !important">提现-到银行卡</span>
          <span style="float: right; font-size: 16px !important"
            >￥{{ apply.money }}</span
          >
        </template>
        <!-- 时间 -->
        <template #price>
          <span>{{ turnTime(apply.applyTime) }}</span>
        </template>
        <!-- 审核状态 -->
        <template #num>
          <van-tag
            plain
            v-if="apply.status == '未审核'"
            type="warning"
            style="float: right"
            >{{ apply.status }}</van-tag
          >
          <van-tag
            plain
            v-else-if="apply.status == '不通过'"
            type="danger"
            style="float: right"
            >{{ apply.status }}</van-tag
          >
          <van-tag plain v-else type="success" style="float: right">{{
            apply.status
          }}</van-tag>
        </template>
      </van-card>
      <div style="height: 80px"></div>
    </div>
    <!-- 订单已完成展示 -->
    <div v-else class="content">
      <van-card
        class="orderCard"
        v-for="employee in EmployeeData"
        :key="employee.id"
        :title="employee.customer.username"
      >
        <!-- 头像 -->
        <template #thumb>
          <van-image fit="cover" round :src="employee.customer.userFace" />
        </template>
        <!-- 名字和状态 -->
        <template #title>
          <div style="font-size: 13px">
            <span>{{ employee.customer.username }}</span>
            <van-tag plain type="success" style="float: right">{{
              employee.status
            }}</van-tag>
          </div>
        </template>
        <!-- 地址 -->
        <template #desc>
          <p>
            {{
              employee.address.province +
              employee.address.city +
              employee.address.area +
              employee.address.address
            }}
          </p>
        </template>
        <!-- 时间 -->
        <template #price>
          <span style="color: black; font-size: 12px">{{
            turnTime(employee.orderTime)
          }}</span>
        </template>
        <!-- 总计 -->
        <template #num>
          <span style="color: red; font-size: 12px"
            >￥{{ employee.total }}</span
          >
        </template>
      </van-card>
    </div>
    <div style="height: 80px"></div>
  </div>
</template>

<script>
import { get } from "@/http/axios";
import moment from "moment";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      active: 0,
      AllApplyData: [],
      // 员工id
      employeeId: "",
    };
  },
  computed: {
    //引入员工数据
    ...mapState("user", ["userInfo"]),
    ...mapState("employee", ["EmployeeData"]),
  },
  methods: {
    ...mapActions("user", ["getUserInfo"]),
    ...mapActions("employee", ["getEmployeeData"]),
    //获取员工id
    queryEmployeeId() {
      let data = {
        page: 1,
        pageSize: 100,
      };
      this.getUserInfo(data);
      this.employeeId = this.userInfo.id;
    },
    // 根据active获取提现和已完成数据
    async queryApplyData() {
      let res, data;
      if (this.active == 1) {
        data = {
          page: 1,
          pageSize: 100,
          userId: this.employeeId,
          applyType: "提现",
        };
        res = await get("/accountApply/pageQueryAccountApply", data);
      } else {
        data = {
          page: 1,
          pageSize: 100,
          employeeId: this.employeeId,
          status: "已完成",
        };
        this.getEmployeeData(data);
      }
      this.AllApplyData = res.data.data.list;
    },
    // 时间戳转换
    turnTime(date) {
      return moment(date).format("YYYY-MM-DD A HH:mm");
    },
  },
  created() {
    // 自动获取员工id
    this.queryEmployeeId();
    // 自动获取提现数据
    this.queryApplyData();
  },
};
</script>

<style scoped>
/* 导航栏 */
.van-nav-bar {
  background-image: linear-gradient(to top, #ebc0fd 0%, #d9ded8 100%);
}
/* 提现卡片 */
.applyCard {
  width: 90%;
  margin: 0 auto;
  margin-top: 3%;
  box-shadow: 0 1px 5px #aaa;
  background-color: #fff;
}
/* 订单卡片 */
.orderCard {
  width: 90%;
  margin: 0 auto;
  margin-top: 3%;
  box-shadow: 0 1px 5px #aaa;
  background-color: #fff;
}
</style>